<script setup lang="ts">
import { Dialog, Form, FormInstance, Field, CellGroup, showNotify } from "vant";
import { ref, reactive } from "vue";
import axios from "axios";
import { useConfigStore } from "@/stores/models/config";

const configStore = useConfigStore();

const dialogData = reactive({
    visible: false,
    loading: false
});

const handleShow = (): void => {
    formData.server_api = configStore.server_api;
    formData.secret_id = configStore.secret_id;
    formData.secret_key = configStore.secret_key;
    dialogData.visible = true;
};

const formData = reactive({
    server_api: "",
    secret_id: "",
    secret_key: ""
});

const formRef = ref<FormInstance | null>(null);
const hanldeConnectDevice = async (action: string): Promise<boolean> => {
    if (action !== "confirm") return true;
    try {
        await formRef.value?.validate();
        dialogData.loading = true;
        await axios({
            url: `http://${configStore.device_ip}/set/api`,
            method: "post",
            data: formData
        });
        configStore.$patch({
            server_api: formData.server_api,
            secret_id: formData.secret_id,
            secret_key: formData.secret_key
        });
        showNotify({
            type: "success",
            message: "设置成功"
        });
        return true;
    } catch (error) {
        console.log(error);
        showNotify({
            type: "danger",
            message: "设置失败"
        });
        return false;
    } finally {
        dialogData.loading = false;
    }
};

defineExpose({
    show: handleShow
});
</script>
<template>
    <Dialog
        v-model:show="dialogData.visible"
        title="设置API"
        show-cancel-button
        :before-close="hanldeConnectDevice"
        :cancel-button-disabled="dialogData.loading"
    >
        <Form class="my-4" :disabled="dialogData.loading" ref="formRef">
            <CellGroup inset>
                <Field
                    autofocus
                    required
                    label="API"
                    label-align="top"
                    placeholder="请输入api url"
                    v-model="formData.server_api"
                    :rules="[{ required: true, message: '请输入api url' }]"
                />
                <Field
                    autofocus
                    required
                    label="SECRET_ID"
                    label-align="top"
                    placeholder="请输入密钥ID"
                    v-model="formData.secret_id"
                    :rules="[{ required: true, message: '请输入密钥ID' }]"
                />
                <Field
                    autofocus
                    required
                    label="SECRET_KEY"
                    label-align="top"
                    placeholder="请输入密钥"
                    v-model="formData.secret_key"
                    :rules="[{ required: true, message: '请输入密钥' }]"
                />
            </CellGroup>
        </Form>
    </Dialog>
</template>
